import { withRouter } from 'react-router';
import { Component } from 'refast';
import logic from './logic';
import './PageGrxx.less';
import Grid from 'uxcore-grid';
import Tag from 'uxcore-tag';
import {Row, Col} from 'uxcore-grid';
import Table from 'uxcore-table';
import {Item} from 'uxcore-tag';
import Tooltip from 'uxcore-tooltip';
import Dialog from 'uxcore-dialog';
import Tabs  from 'uxcore-tabs';
import EmptyData from 'uxcore-empty-data';
import Album, { Photo } from 'uxcore-album';
import Button from 'uxcore-button';
import { URLS } from './../../app/variables';
import NoP from './../../images/nop.png'
import Steps, { Step } from 'uxcore-steps';

import { NO_DATA_HYPHEN } from '../../common/constants';

class PageGrxx extends Component {

  constructor(props) {
    super(props, logic);
  }

  componentDidMount() {
    this.dispatch(['timeline'], this.props.params);
    this.dispatch(['jbxx', 'zsxx', 'zjxmxx', 'yjxmxx'], this.props.params);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }


  render() {

    const photos = [];

    this.state.emp.zbxx && this.state.emp.zbxx.split(',').map((v, k)=> {
      photos.push(<Photo src={URLS.zpxx + '?docId=' + v} key={k}/>)
    });

    const steps = this.state.steps.map(function (s, i) {
      return (
        <Step key={i} title={ <div style={{textAlign:'left'}}>{s.time}</div>}
              description={<div style={{textAlign:'left'}}>{s.title + s.content}</div>}/>
      );
    });

    return (
      <div className="page-grxx">
        <Grid fluid={true}>
          <Row className="show-grid">
            <Col xs={24} md={12}>
              <div className="col_1" style={{height:625}}>
                <div className="title title_1">人员信息</div>
                <div className="col-md-24">
                  <div className="col-md-12">
                    <div className="ryxx_name">{this.state.emp.xm ? this.state.emp.xm : NO_DATA_HYPHEN}</div>
                    <div className="ryxx_num">
                      <Tag addTags={false}>
                        <Item type="info"><i className="kuma-icon kuma-icon-staff"></i> {this.state.emp.zw}</Item>
                      </Tag>
                    </div>
                    <div className="ryxx_num">{this.state.emp.sjhm ? this.state.emp.sjhm : NO_DATA_HYPHEN}</div>
                    <div className="ryxx_num">{this.state.emp.certNum ? this.state.emp.certNum : NO_DATA_HYPHEN}</div>
                  </div>
                  <div className="col-md-12">
                    <div className="ryxx_img">
                      {
                        this.state.emp.zbxx ?
                          (<Album width={200} height={110} enableKeyBoardControl={true} enableThumbs={false}>
                            {photos}
                          </Album>)
                          : <img src={NoP} width="110" height="140"/>
                      }
                    </div>
                  </div>
                </div>
                <div className="col-md-24">
                  <div className="ryxx_fs">
                    {this.state.emp.grcx ? '个人诚信' + this.state.emp.grcx : NO_DATA_HYPHEN}
                  </div>
                </div>
                <div className="col-md-24 ryxx_com">
                  {this.state.emp.orgName ? this.state.emp.orgName : NO_DATA_HYPHEN}
                </div>
                <hr/>
                <div className="col-md-24 ">
                  <div className="ryxx_mx">
                    <i className="kuma-icon kuma-icon-file"></i> 证书信息
                  </div>
                </div>
                <div className="grxx_table_div col-md-24">
                  <Table {...this.state.zsxxProps} ref="zsgrid"/>
                </div>
              </div>
            </Col>
            <Col xs={24} md={12}>
              <Tabs defaultActiveKey="0" type="small">
                <Tabs.TabPane tab="时间轴" key="0">
                  <div className="col_1" style={{height:288}}>
                    <div className="col-md-24 timeline">
                      { this.state.steps.length > 0 ?
                        <Steps type="title-on-top" maxDescriptionWidth="500" direction="vertical" showIcon={false}
                               current={this.state.steps.length}>{steps}</Steps>
                        : <EmptyData />
                      }
                    </div>
                  </div>
                </Tabs.TabPane>

                <Tabs.TabPane tab="在建工程信息" key="1">
                  <div className="col_1" style={{height:288}}>
                    <div className="grxx_table_div col-md-24">
                      <Table {...this.state.zjxmProps} ref="zjgcgrid"/>
                    </div>
                  </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="历史业绩信息" key="2">
                  <div className="col_1" style={{height:288}}>
                    <div className="grxx_table_div col-md-24">
                      <Table {...this.state.yjxmProps} ref="yjgrid"/>
                    </div>
                  </div>
                </Tabs.TabPane>
              </Tabs>

              <div className="col_1" style={{height:281,marginTop:15}}>
                <div className="title title_3">奖项信息</div>
                <div className="jxxx-table-div ">
                  <EmptyData style={{ width: '100%',height:'270px' }}/>
                </div>
              </div>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default withRouter(PageGrxx);
